<template>
  <div class="flex flex-col">
    <a-card
      class="min-h-[68px] rounded my-[10px]"
      :body-style="{ padding: '12px 30px 50px', height: '100%' }"
      :bordered="false"
    >
      <!-- 头部返回列表功能 -->
      <template #extra>
        <a-button class="border-none" icon="rollback" @click="rollback"
          >{{ $t("app.setting.themecolor.rr99") }}
        </a-button>
      </template>
      <!-- 正文头部 -->
      <div slot="title">
        <a-space>
          <div class="ty"></div>
          风险详情
        </a-space>
      </div>
      <!-- 注册识别风险 -->
      <a-form :form="form" layout="vertical">
        <!-- 注册识别风险 -->
        <a-form-item
          style="margin: 0"
          :label="$t('user.verification-code.required111566125')"
        >
          <a-input
            v-decorator="[
              'RiskName',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577184'
                    ),
                  },
                ],
              },
            ]"
            :placeholder="$t('user.verification-code.required111566152')"
            style="width: 900px"
            :disabled="disabled"
          />
        </a-form-item>
        <a-form-item
          style="margin: 0"
          :label="$t('user.verification-code.required111566153')"
        >
          <a-textarea
            :auto-size="{ minRows: 3, maxRows: 10 }"
            :placeholder="$t('user.verification-code.required111566154')"
            :rows="3"
            v-decorator="[
              'RiskDetail',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577353'
                    ),
                  },
                ],
              },
            ]"
            style="width: 900px"
            :disabled="disabled"
          />
        </a-form-item>
        <a-row>
          <!-- 时间组合 -->
          <a-col :span="12">
            <a-form-item
              :label="$t('user.verification-code.required111566155')"
            >
              <a-date-picker
                v-decorator="['RiskStartTime']"
                format="YYYY-MM-DD"
                style="width: 440px"
                :placeholder="$t('user.verification-code.required111566157')"
                :disabled="disabled"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$t('user.verification-code.required111566156')"
            >
              <a-date-picker
                v-decorator="['RiskDeadline', config]"
                format="YYYY-MM-DD"
                style="width: 440px"
                :placeholder="$t('user.verification-code.required111566157')"
                :disabled="disabled"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <!-- 对象组合 -->
          <a-col :span="12">
            <a-form-item
              :label="$t('user.verification-code.required111566158')"
              :colon="false"
              labelAlgin="left"
            >
              <a-select
                v-decorator="[
                  'RiskOwnerUserId',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577354'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="$t('user.verification-code.required111566175')"
                style="width: 440px"
                :disabled="disabled"
              >
                <a-select-option
                  v-for="item in userList"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$t('user.verification-code.required111566159')"
              :colon="false"
              labelAlgin="left"
            >
              <a-select
                v-decorator="[
                  'RiskDcoUserId',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577355'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="$t('user.verification-code.required11156615911')"
                style="width: 440px"
                :disabled="disabled"
              >
                <a-select-option
                  v-for="item in userList"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <!-- 风险组合 -->
          <a-col :span="12">
            <a-form-item
              :label="$t('user.verification-code.required111566160')"
              :colon="false"
            >
              <a-select
                v-decorator="['RiskLevel']"
                :placeholder="$t('user.verification-code.required11156616011')"
                style="width: 440px"
                :disabled="disabled"
              >
                <a-select-option
                  v-for="item in riskLevel"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              :label="$t('user.verification-code.required111566161')"
              :colon="false"
            >
              <a-select
                v-decorator="[
                  'RiskType',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577357'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="$t('user.verification-code.required11156616111')"
                style="width: 440px"
                :disabled="disabled"
              >
                <a-select-option
                  v-for="item in riskType"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item :label="$t('user.verification-code.required111566162')">
          <a-textarea
            v-decorator="['RiskRemark']"
            :placeholder="$t('user.verification-code.required11156616211')"
            :rows="4"
            style="width: 900px"
            :disabled="disabled"
          />
        </a-form-item>
        <a-form-item label="ID" class="hidden">
          <a-input v-decorator="['id']" />
        </a-form-item>
        <a-upload
          :multiple="true"
          :file-list="fileLists"
          :customRequest="handleChange"
          disabled
        >
          <a-button>
            <a-icon type="upload" />
            {{ $t("user.verification-code.required111566163") }}
          </a-button>
        </a-upload>
        <!-- 风险缓解计划 -->

        <a-table
          ref="table"
          :pagination="false"
          size="middle"
          style="margin-top: 20px"
          class="h-full overflow-x-auto"
          :dataSource="listData"
          :rowKey="(record) => record.Id"
        >
          <a-table-column
            key="DpiaActionName"
            data-index="DpiaActionName"
            width="150"
          >
            <span slot="title">{{
              $t("user.verification-code.required111566166")
            }}</span>
          </a-table-column>
          <a-table-column
            key="DpiaActionSource"
            data-index="DpiaActionSource"
            width="150"
          >
            <span slot="title">{{
              $t("user.verification-code.required111566167")
            }}</span>
          </a-table-column>
          <!-- <a-table-column key="DpiaActionResult" data-index="DpiaActionResult" width="150" >
                      <span slot="title" >{{ $t( 'user.verification-code.required111566168') }}</span>
                  </a-table-column> -->
          <a-table-column
            key="DpiaActionResult"
            data-index="DpiaActionResult"
            width="150"
          >
            <span slot="title">{{
              $t("user.verification-code.required111566168")
            }}</span>
          </a-table-column>
          <a-table-column
            key="DpiaActionUserResponsible"
            data-index="DpiaActionUserResponsible"
            width="150"
          >
            <span slot="title">{{
              $t("user.verification-code.required111566128")
            }}</span>
          </a-table-column>
          <a-table-column
            key="DpiaActionCreatetime"
            data-index="DpiaActionCreatetime"
            width="150"
          >
            <span slot="title">{{
              $t("user.verification-code.required111566169")
            }}</span>
          </a-table-column>
          <a-table-column
            key="DpiaActionFinishTime"
            data-index="DpiaActionFinishTime"
            width="150"
          >
            <span slot="title">{{
              $t("user.verification-code.required111566170")
            }}</span>
          </a-table-column>
          <!-- <a-table-column key="DpiaActionStatus" data-index="DpiaActionStatus" :filters="columns[6].filters"
            @filterDropdownVisibleChange="(e) => { if (e) this.setValus(9) }">
            <span slot="title" class="min-w-90p">{{ $t('user.login.message-invalid-verification-code0011') }}</span>
          </a-table-column> -->
          <a-table-column
            key="DpiaActionStatus"
            :title="$t('user.login.message-invalid-verification-code0011')"
          >
            <template slot-scope="text, record">
              <span>
                <div v-if="record.DpiaActionStatus == 'Draft'">
                  <a-badge color="blue" />
                  {{ $t("user.verification-code.required111566133") }}
                </div>
                <div v-else-if="record.DpiaActionStatus == 'In-progress'">
                  <a-badge color="purple" />
                  {{ $t("user.verification-code.required111566145") }}
                </div>
                <div v-else-if="record.DpiaActionStatus == 'Completed'">
                  <a-badge color="green" />
                  {{ $t("user.verification-code.required111566146") }}
                </div>
                <div v-else-if="record.DpiaActionStatus == 'To be edited'">
                  <a-badge color="gray" />
                  {{
                    $t(
                      "user.verification-code.required11156611057737144228143122233556655"
                    )
                  }}
                </div>
              </span>
            </template>
          </a-table-column>
          <a-table-column
            key="action"
            :title="$t('menu.exception.not-find')"
            style="margin-left: -15px"
          >
            <template slot-scope="text, record">
              <span>
                <a-space size="0">
                  <!-- 修改按钮 -->
                  <a-button
                    type="link"
                    @click="showModal('2', record.Id)"
                    block
                    >{{
                      $t("user.verification-code.required111566147")
                    }}</a-button
                  >
                  <!-- 删除按钮 -->
                  <a-popconfirm
                    :title="
                      $t('user.verification-code.required111566110577225')
                    "
                    :ok-text="$t('user.verification-code.required1166')"
                    :cancel-text="$t('user.email.required11')"
                    @confirm="() => del(record)"
                    disabled
                  >
                    <a-button disabled type="link" size="small" block>{{
                      $t("app.setting.copy")
                    }}</a-button>
                  </a-popconfirm>
                </a-space>
              </span>
            </template>
          </a-table-column>
        </a-table>
        <!-- 分页 -->
        <a-pagination
          class="mb-[130px]"
          size="small"
          v-model="pagination.page"
          :total="pagination.total"
          hideOnSinglePage
          :pageSize.sync="pagination.pageSize"
          @change="getList"
        />
        <!-- 风险处置计划描述 -->
        <a-form-item :label="$t('user.verification-code.required111566183')">
          <a-textarea
            v-decorator="['RiskDisposeDetail']"
            :placeholder="$t('user.verification-code.required11156618311')"
            :rows="4"
            disabled
          />
        </a-form-item>
        <!-- 风险审核结果 -->
        <a-form-item :label="$t('user.verification-code.required111566184')">
          <a-textarea
            v-decorator="['RiskResult']"
            :placeholder="$t('user.verification-code.required11156618411')"
            :rows="4"
          />
        </a-form-item>
        <!-- 时间轴 -->
        <a-timeline>
          <a-timeline-item v-for="item in transferList" :key="item.Id">
            <div>
              {{
                item.RiskReturnCommentsDCO + item.RiskReturnCommentsCreatetime
              }}
            </div>
            <div>
              <span>{{ $t("user.verification-code.required111566181") }}</span
              >{{
                item.RiskReturnCommentsInfo ? item.RiskReturnCommentsInfo : "无"
              }}
            </div>
          </a-timeline-item>
        </a-timeline>
        <div
          class="absolute right-0 bottom-0 w-full px-4 py-[10px] bg-white text-left z-1 flex justify-center"
        >
          <!-- 提交时 -->
          <a-row class="w-full" :gutter="16">
            <a-col :span="8">
              <a-button
                :loading="loading"
                class="w-full border-none shadow"
                type="primary"
                @click.native.prevent="submit1('add')"
                v-if="riskReviewState != 4"
              >
                <span v-if="!loading">{{
                  $t("user.verification-code.required111566165")
                }}</span>
                <span v-else>{{ $t("app.setting.themecolor.tt") }}...</span>
              </a-button>
            </a-col>
            <a-col :span="8">
              <a-button
                @click="dcoBackoffShow()"
                class="w-full border-none shadow"
              >
                {{ $t("user.verification-code.required111566110577265") }}
              </a-button>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }"
      >
        <!-- 提交 -->
        <a-button type="primary" @click="submitadd()" style="margin-right: 20px"
          >{{ $t("user.verification-code.required1166") }}
        </a-button>
        <!-- 保存草稿 -->
        <a-button @click="submitSave('edit')" style="margin-right: 20px"
          >{{ $t("user.register-result.view-mailbox") }}
        </a-button>
        <!-- 返回 -->
        <a-button style="margin-right: 8px" @click="rollback"
          >{{ $t("user.email.required11") }}
        </a-button>
      </div>
    </a-card>
    <creatRiskAction
      :mode="mode"
      :riskId="riskId"
      :editId="editId"
      ref="creatRiskAction"
      @getList="getList"
      :state="state"
    >
    </creatRiskAction>
  </div>
</template>
<script>
import storage from "store";
import { riskCreate } from "@/api/risk/json";
import {
  RISKActionList,
  riskBackOff,
  riskBackOffList,
  RISKEditActionList,
  ristCreateAction,
  ristDelAction,
} from "@/api/risk/form";
import moment from "moment";
import axios from "axios";
import creatRiskAction from "./components/creatRiskAction.vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";

const columns = [
  {
    title: "措施名称",
    dataIndex: "DpiaActionIdTag",
    scopedSlots: { customRender: "DpiaActionIdTag" },
    width: "50px",
  },
  {
    title: "措施来源",
    dataIndex: "DpiaActionSource",
    width: "59px",
  },
  {
    title: "措施执行结果",
    dataIndex: "DpiaActionResult",
    width: "64px",
  },
  {
    title: "责任人",
    dataIndex: "DpiaActionUserResponsible",
    width: "40px",
  },
  {
    title: "发起时间",
    dataIndex: "DpiaActionCreatetime",
    width: "108px",
  },
  {
    title: " 目标完成时间",
    dataIndex: "DpiaActionFinishTime",
    width: "79px",
  },
  {
    title: "状态",
    dataIndex: "DpiaActionStatus",
    width: "79px",
    scopedSlots: { customRender: "actionStatus" },
    onFilterDropdownVisibleChange: (e) => {
      if (e) {
        this.setValus(9);
      }
    },
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "action" },
    width: "29px",
  },
];
const data = [];

export default {
  components: {
    creatRiskAction,
  },
  data() {
    return {
      disabled: false,
      listLoading: false,
      data,
      listData: [],
      headers: {
        authorization: "authorization-text",
      },
      columns,
      fileLists: [],
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      //审阅抽屉显示
      reviewVisible: false,
      loading: false,
      // 这个要根据服务修改title
      titleMap: "",
      mode: 0,
      state: "",
      //risk主页面编辑id
      riskEditId: null,
      current: 0,
      // 时间配置
      config: {
        rules: [
          {
            type: "object",
            required: true,
            message: this.$t("user.verification-code.required111566110577285"),
          },
        ],
      },
      // 分页参数
      pagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      submitId: "0",
      env: process.env.VUE_APP_BASE_API,
      //存上传文件接口地址
      urlList: [],
      //点新建时的风险Id
      riskId: null,
      //选择的riskAction列表ID
      RiskListSelectId: null,
      // DCO backoff的状态
      dcoBackoffVisible: false,
      dcoNote: undefined,
      //退回记录
      transferList: [],
      riskReviewState: undefined,
    };
  },
  computed: {
    rowSelection() {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          console.log(
            `selectedRowKeys: ${selectedRowKeys}`,
            "selectedRows: ",
            selectedRows
          );
          this.RiskListSelectId = [selectedRowKeys].join("");
          // console.log(this.RiskListSelectId);
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === "Disabled User", // Column configuration not to be checked
            name: record.name,
          },
        }),
      };
    },
  },
  methods: {
    async showModal(state, editId) {
      if (state == "0") {
        //新建时获取actin ID
        const { data } = await ristCreateAction();
        //  console.log(data.ActionId);
        this.$refs.creatRiskAction.openAction(data);
      } else {
        //编辑
        try {
          console.log("editId");
          this.state = 2;
          const { data } = await RISKEditActionList({ Id: editId });
          console.log(data);
          //传值回显
          this.$refs.creatRiskAction.openAction(editId, data, state);
        } catch (error) {
          // 报错信息
          this.$message.error(error);
          console.log(error);
        } finally {
          // 不管成功失败都会执行
          this.listLoading = false;
        }
      }
    },
    async open(mode, data = {}, editId) {
      this.riskReviewState = data.RiskState;
      this.mode = mode;
      if (mode == 0) {
        this.titleMap = this.$t(
          "user.verification-code.required111566110577146"
        );
        console.log(mode);
        this.mode = mode;
        this.visible = true;
        const res = await riskCreate();
        this.riskId = res.data.Id;
        this.getList(this.riskId);
        console.log(this.riskId);
        console.log("新增");
      }
      // 如果是修改
      else {
        this.riskEditId = editId;
        if (mode == 1) {
          console.log("2");
          this.titleMap = this.$t(
            "user.verification-code.required111566110577147"
          );
          this.visible = true;
          this.getList(this.editId);
          await this.$nextTick();
          //修改的时候需要给form赋值
          this.form.setFieldsValue({
            RiskName: data.RiskName,
            RiskDetail: data.RiskDetail,
            RiskOwnerUserId: data.RiskOwnerUserId,
            RiskLevel: data.RiskLevel,
            RiskStartTime: data.RiskStartTime
              ? moment(data.RiskStartTime, "YYYY-MM-DD HH:mm:ss")
              : null,
            RiskType: data.RiskType,
            RiskDcoUserId: data.RiskDcoUserId ?? null,
            RiskDeadline: data.RiskDeadline
              ? moment(data.RiskDeadline, "YYYY-MM-DD HH:mm:ss")
              : null,
            RiskRemark: data.RiskRemark,
          });

          console.log("修改");
          this.mode = mode;
        } else {
          console.log("1");
          this.transferList = [];
          const { data: BackOffList } = await riskBackOffList({
            RiskId: this.editId,
          });
          console.log("BackOffList", BackOffList);
          this.transferList = BackOffList.Lists;
          console.log(this.transferList);
          this.riskEditId = editId;
          this.disabled = true;
          this.mode = mode;
          (this.reviewVisible = true), this.getList(this.editId);
          await this.$nextTick();
          this.form.setFieldsValue({
            RiskName: data.RiskName,
            RiskDetail: data.RiskDetail,
            RiskOwnerUserId: data.RiskOwnerUserId,
            RiskLevel: data.RiskLevel == 0 ? undefined : data.RiskLevel,
            RiskStartTime: data.RiskStartTime
              ? moment(data.RiskStartTime, "YYYY-MM-DD HH:mm:ss")
              : null,
            RiskType: data.RiskType,
            RiskDcoUserId: data.RiskDcoUserId ?? null,
            RiskDeadline: data.RiskDeadline
              ? moment(data.RiskDeadline, "YYYY-MM-DD HH:mm:ss")
              : null,
            RiskRemark: data.RiskRemark,
            RiskDisposeDetail: data.RiskDisposeDetail,
            RiskResult: data.RiskResult,
          });
          console.log("审阅");
        }
      }

      if (data.File) {
        data.File.forEach((item, index) => {
          let name = item.RiskUploadUrl.split("/");
          this.fileLists.push({
            uid: index,
            name: name[name.length - 1],
            status: "done",
            url: item.RiskUploadUrl,
            RiskUploadType: 1,
          });
        });
      }
    },
    async getList(id) {
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await RISKActionList({
          ...{ page, pageSize },
          ...this.queryForm,
          RiskId: id,
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.listData = Lists || [];

        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    // 上传提交
    //文件上传
    async handleChange(e) {
      // 上传提交
      this.uploadLoading = true;
      let formdata = new FormData();
      formdata.append("file", e.file);
      try {
        const { status, data } = await axios({
          url: `${this.env}/v1/oss/upload`,
          method: "post",
          data: formdata,
          headers: {
            token: storage.get(ACCESS_TOKEN),
            tokens: storage.get("bmwToken") || "",
          },
        });
        if (status == 200 && data.code == 1) {
          if (data.data != "") {
            await this.$nextTick();
            var files = data.data;
            var index = this.fileLists.length;
            if (files != "" && files != undefined) {
              var fileName = files.split("/");
              this.fileLists.push({
                uid: index + 1,
                name: fileName[fileName.length - 1],
                status: "done",
                url: data.Url + data.data,
              });
              console.log(this.riskEditId);
              // 上传文件完成后新增
              // 新增
              this.mode == 0
                ? this.urlList.push({
                    RiskUploadType: 1,
                    RiskId: this.riskId,
                    RiskUploadUrl: data.data,
                  })
                : this.urlList.push({
                    RiskUploadType: 1,
                    RiskId: this.riskEditId,
                    RiskUploadUrl: data.data,
                  });
              // await ristCreateActionRemark([{
              //   RiskUploadUrl:data.data, RiskId:this.riskId, RiskUploadType:1
              // }])
              // await ristCreateActionRemark([{
              //   ActionUploadUrl: data.data, ActionId: this.actionId, ActionType: 2
              // }])
            }
          }
        } else {
          this.$message.error(
            this.$t("user.verification-code.required111566110577282")
          );
        }
      } catch (error) {
        console.log(error);
        this.$message.error(error);
      } finally {
        this.uploadLoading = false;
      }
    },
    //审阅提交
    submit1(type) {
      console.log(this.mode);
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        const RiskStartTime = values["RiskStartTime"]
          ? moment(values["RiskStartTime"]).format("YYYY-MM-DD")
          : null;
        values["RiskStartTime"] = RiskStartTime;
        const RiskDeadline = moment(values["RiskDeadline"]).format(
          "YYYY-MM-DD"
        );
        values["RiskDeadline"] = RiskDeadline;
        const urlList = this.urlList;
        values["File"] = urlList;
        if (type === "add") {
          values["RiskState"] = 4;
        } else {
          values["RiskState"] = 1;
        }
        if (!err) {
          console.log(values);
          for (var arr = 0; arr < this.userList.length; arr++) {
            if (this.userList[arr].value == values.RiskOwnerUserId) {
              values.RiskOwnerUserName = this.userList[arr].label;
            }
          }
          for (var arr = 0; arr < this.userList.length; arr++) {
            if (this.userList[arr].value == values.RiskDcoUserId) {
              values.RiskDcoUserName = this.userList[arr].label;
            }
          }
          try {
            if (this.mode == 0) {
              console.log("新增");
              values["Id"] = this.riskId;
              const { data } = await riskCreate({ ...values });
              // const { data1 } = await RiskListSelect({ riskId: this.riskId, ids: this.RiskListSelectId })
            } else {
              console.log("编辑");
              console.log(this.editId);
              values["Id"] = this.editId;
              const { data } = await riskCreate(values);
              // const { data1 } = await RiskListSelect({ riskId: this.editId, ids: this.RiskListSelectId })
            }

            // const params = { ...values }
            // // 判断状态是新增还是修改 调用不同的api
            // this.mode == 0
            //   ? await appIdCreate({ ...params })
            //   : await appIdChange({ ...params })
            // 如果成功就调用父页面当前组件的succeed上绑定的事件
            this.$emit("succeed");
            this.$message.success(
              this.$t("user.verification-code.required111566110577308")
            );
            //如果成功就关闭
            this.close();
          } catch (error) {
            console.log("err", error);
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    // 删除
    async del(record) {
      this.listLoading = true;
      try {
        console.log(record);
        await ristDelAction({ Id: record.Id });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        this.getList(record.RiskId);
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    // 关闭 通用的
    close() {
      this.riskId = null;
      this.fileLists = [];
      this.urlList = [];
      this.$emit("initEditId");
      this.mode = "0";
      this.current = 0;
      this.$emit("getList");
      console.log("触发了");
      this.disabled = false;
      // 修改侧边栏状态
      this.visible = false;
      this.reviewVisible = false;
      // 清空form的值
      this.form.resetFields();
    },
    async dcoBackoffShow() {
      this.dcoBackoffVisible = true;
    },
    async dcoBackoff() {
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        const RiskStartTime = values["RiskStartTime"]
          ? moment(values["RiskStartTime"]).format("YYYY-MM-DD")
          : null;
        values["RiskStartTime"] = RiskStartTime;
        const RiskDeadline = moment(values["RiskDeadline"]).format(
          "YYYY-MM-DD"
        );
        values["RiskDeadline"] = RiskDeadline;
        const urlList = this.urlList;
        values["File"] = urlList;
        for (var arr = 0; arr < this.userList.length; arr++) {
          if (this.userList[arr].value == values.RiskOwnerUserId) {
            values.RiskOwnerUserName = this.userList[arr].label;
          }
        }
        for (var arr = 0; arr < this.userList.length; arr++) {
          if (this.userList[arr].value == values.RiskDcoUserId) {
            values.RiskDcoUserName = this.userList[arr].label;
          }
        }
        values["RiskState"] = 3;
        values["Id"] = this.editId;

        // const { data1 } = await RiskListSelect({ riskId: this.editId, ids: this.RiskListSelectId })

        // DCO退回记录
        try {
          const { data } = await riskCreate(values);
          await riskBackOff({
            RiskId: this.editId,
            RiskReturnCommentsInfo: this.dcoNote,
          });
          this.dcoBackoffVisible = false;
          this.dcoNote = "";
          this.$message.success(
            this.$t(
              "user.verification-code.required11156611057737144228143122255"
            )
          );
        } catch (error) {
          this.$message.error(error);
        } finally {
          this.loading = false;
        }

        this.$emit("succeed");
        this.close();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  padding-right: 150px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    color: #999;
  }
}

/deep/ .drawer-form {
  margin-bottom: 50px;

  .ant-form-item {
    margin-right: 10px;
  }

  .ant-form-item-label {
    display: inline-block;
    line-height: 20px;
    width: 100px;
    margin-right: 10px;
    margin-top: 10px;
    margin-left: 10px;
  }
}

.checkbox {
  background: #eee;
  padding: 10px;
  margin-top: 16px;
  position: relative;
  top: -10px;
  left: -10px;

  .ant-form-item-label {
    display: inline-block;
    line-height: 40px;
    width: 150px;
    // margin-right: 10px;
  }
}

/deep/ .ant-table-thead {
  background: #f4f7ff;
  font-weight: 700;
}

.import-butoon {
  margin-top: 13px;
}

.table-di {
  margin-top: 13px;
}

.ty {
  width: 13px;
  height: 13px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border: 4px solid #5076a5;
  border-radius: 50%;
}

.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}

/deep/ .shuju {
  margin-left: 10px !important;
}

/deep/ [data-v-23a62919] .drawer-form .ant-form-item {
  margin-right: 90px !important;
}

/deep/ [data-v-23a62919] .drawer-form .ant-form-item-label {
  display: inline-block;
  line-height: 20px;
  width: 100px;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
  overflow: visible !important;
}

/deep/ element.style {
  width: 178px;
  margin-left: 160px !important;
}

/deep/ .drawer-form .ant-form-item-label {
  display: inline-block;
  line-height: 20px;
  width: 145px !important;
  margin-right: 10px;
  margin-top: 10px;
  margin-left: 10px;
  overflow: visible !important;
}

.zhushi {
  background-color: skyblue;
  float: left;
  z-index: 99;
  width: 200px;
  position: absolute;
  top: -40px;
  left: 662px;
}

.a-checkbox-group {
  display: flex;
  flex-direction: row;
}

/deep/ .ant-checkbox + span {
  /* padding-right: 8px; */
  /* padding-left: 8px; */
}

.dlex {
  display: flex;
  justify-content: space-evenly;
}
</style>